<template>
  <view class="login_content">
    <view class="text">
      Hello<br />
      欢迎使用MyDraw
    </view>

    <u--image :showLoading="true" :src="src" width="80px" height="80px"></u--image>

    <u--form labelPosition="left" :model="userInfo" ref="uForm">
      <u-form-item prop="userInfo.nickname" :rules="rules" label="昵称" labelWidth="55" labelAlign="right">
        <u--input placeholder="请输入昵称" border="surround" v-model="userInfo.nickname" style="width: 100%"></u--input>
      </u-form-item>

      <u-form-item prop="userInfo.phone" :rules="rules" label="手机号" labelWidth="55" labelAlign="right">
        <u--input placeholder="请输入手机号" border="surround" v-model="userInfo.phone" style="width: 100%"></u--input>
      </u-form-item>

    </u--form>

    <u-button type="primary" text="提交" @click="saveHandel()"></u-button>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { upDataUserInfo } from '@/api/api'
export default {
  data() {
    return {
      userInfo: {},
      rules: [],
      src: "",
    }
  },
  onLoad() {
    uni.hideTabBar
  },
  onShow() {
    uni.showModal({
      title: "提示",
      content: "是否授权获取用户信息？",
      success: (res) => {
        console.log(res)
        uni.getUserProfile({
          desc: "登录",
          success: (res) => {
            const userInfo = res.userInfo;
            console.log(userInfo);
            this.src = userInfo.avatarUrl
          },
          fail: (err) => {
            console.log(err);
          }
        })
      }
    })
  },
  methods: {
    saveHandel() {
      this.userInfo.avatar = this.src
      upDataUserInfo(this.userInfo).then(res => {
        if (res.code == 200) {
          this.$refs.uToast.show({
            type: 'success',
            message: "注册成功",
          })
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.login_content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  .text {
    height: 150rpx;
    width: 500rpx;
    font-size: 50rpx;
    font-weight: 800;
    color: #1d1d1d;
    margin: 100rpx auto 0 auto;
  }
}

::v-deep .u-form {
  width: 600rpx;
}

::v-deep .u-button {
  width: 500rpx !important;
  margin: 20rpx 0;
}
</style>